<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>XXXX年XX省高考成绩查询系统 </title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="main">
    <div id="login">
        <div id="program" style="width: 680px;">
            <h2 style="text-align: center"> 2022年XX省高考成绩查询 </h2><br><br>
            <div>
                <label>&nbsp;&nbsp;请输入考生姓名: </label><input v-model="input.username" type="text"><br><br>
                <label>&nbsp;&nbsp;请输入身份证号: </label><input v-model="input.password" type="text"><br><br>
                &nbsp;&nbsp;<button style="font-size:16px;" @click="reset()">重新输入</button>
                &nbsp;&nbsp;<button style="font-size:16px;" @click="send()">确认查询</button>
                <br><br>
            </div><br>
            <div style="font-size:16px;">{{info}}</div><br>
            <div style="font-weight:bold;font-size:22px; color:blue" v-if="successfulLogin">
                <a href="https://1.15.138.49:8010/search.html">{{studentInfo}}</a><br>
                <div style="font-weight:bold;font-size:16px; color:red">如正确请点击上方考生信息链接进行成绩查询，如不正确请尽快拨打 029-85221726 XX省招生考试热线进行反馈核实。</div>
            </div>
        </div>
        <div style="text-align: center;bottom:0">XX省招生委员会办公室</div>
    </div>
</div>
<script type="text/javascript">
new Vue({
    el: '#program',
    data: {
        successfulLogin: false,
        info: "",
        studentInfo: "",
        code: "",
        input: {
            username: '',
            password: ''
        }
    },
    methods: {
        send() {
            axios.post('/student/login', this.input).then(response =>{
                if (response.data.code == 200) {
                    this.successfulLogin = true
                } else {
                    this.info = response.data.msg
                    this.successfulLogin=false
                }
                this.info = response.data.msg
                this.studentInfo = response.data.data
            }).
            catch(function(error) {
                console.log(error);
            });
        },
        copyFn() {
            const input = document.createElement('input');
            document.body.appendChild(input);
            input.setAttribute('value', this.studentInfo);
            input.select();
          try {
            if (document.execCommand("copy")) {
              document.body.removeChild(input)
              this.$Message.success("复制成功")
            }
          } catch {
            this.$Message.error("复制失败，请检查浏览器兼容")
          }
        },
        reset() {
        	this.input.username=""
        	this.input.password=""
        	this.successfulLogin=false
        }
        
    }
})

</script>
<style>
    html, body{
        width: 100%;
        height: 100%;
    }
    *{
        padding: 10;
        margin: 10;
    }
    #main{
        width: 100%;
        height: 100%;
        background-size: 100%;
        position: relative;
    }
    #login{
        width: 800px;
        height: 460px;
        position: absolute;
        right: 100px;
        top: 200px;
        background: #F5F5F5;
        border-radius: 5px;
        border: 2px solid #f3f3f3;
    }

</style>
</body>
</html>